import Vue from 'vue' // 导入 vue
import VueRouter from 'vue-router' // 导入 路由管理器

// 注册 路由管理器 提供的 组件(router-view/router-link)
Vue.use(VueRouter)

// 注册 路由表(保存 url 和 组件的 映射关系)
const routes = [
    // http://localhost:8080/#/
    {
        path: '/',   // #/
        redirect: '/my?id=hugrry' // 重定向到 #/my 本质 就是修改 hash值
    },
    {
        name: 'my1',
        path: '/my',
        component: () => import('@/components/My.vue'),
        children: [
            {
                // 如果是 dog ，那么hash=/#/my/dog  （推荐）
                // 如果是 /dog ，那么hash=/#/dog
                path: 'dog',
                component: () => import('@/components/Sons/Dog.vue')
            }
        ]
    }, {
        name: 'find1',
        path: '/find',
        component: () => import('@/components/Find.vue')
    }, {
        name: 'part1',
        path: '/part/:a1/:a2',
        component: () => import('@/components/Part.vue')
    },
    // 配置 404 路由：一定要放在所有路由最后
    {
        path: '*',
        component: () => import('@/components/MeiYou.vue')
    }
]

// 导出 路由管理器对象，并 传入 路由表
// export default new VueRouter({ routes: routes })

const router = new VueRouter({ routes })

// 路由守卫1：beforeEach 在 hash值改变之后，组件 切换之前执行
router.beforeEach((to, from, next) => {
    console.log('to->', to)
    console.log('from->', from)

    // 如果 要去的是 /my ，要求必须带 id，如果没有id，则回到之前的组件
    if (to.path === '/my' && !to.query.id) {
        console.log('抱歉，没有id是不可以访问/my')
        // 回到之前的组件
        return next(false)
    }
    // 去 新的组件
    next()
})
// router.afterEach

export default router